<template>
  <el-card style="box-shadow: none;">
    <el-row>
      <el-tooltip class="item" effect="dark" content="返回" placement="right-start">
        <el-button type="text" @click="returnClothingList" style="margin-left: 10px">
          <svg t="1708609271658" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="5331" width="30" height="30">
            <path d="M257.2 567.1h584.5c29 0 52.5-23.4 52.5-52.2V512c0-28.8-23.5-52.2-52.5-52.2H255.9L431 284.1c20.2-20.3 20.2-53 0-73.3l-0.4-0.4c-20.2-20.3-53.1-20.5-73.6-0.5l-0.5 0.5L71.8 496.1a26.013 26.013 0 0 0 0 36.7l55.7 55.9L352 813.8c20.4 20.5 53.7 20.6 74.3 0.4l0.4-0.4 1.7-1.7c20.3-20.3 20.3-53.1 0-73.4L257.2 567.1z" p-id="5332" fill="#515151"></path>
          </svg>
        </el-button>
      </el-tooltip>
      <h1 class="row__title" style="margin-left: 20px;margin-top: 3px; justify-content: center;">新增虚拟服饰</h1>
    </el-row>
    <el-form :model="dataForm" ref="dataForm" label-width="90px" size="large"
             :label-position="'left'" :rules="rules"
    style="margin-top: 20px;margin-left: 20px">
      <el-form-item label="服饰名称" prop="clothingName">
        <el-input v-model="dataForm.clothingName" style="width: 400px"></el-input>
      </el-form-item>
      <el-form-item label="服饰类型" prop="type">
        <el-radio-group v-model="dataForm.type">
          <el-radio label=1>发型</el-radio>
          <el-radio label=2>上衣</el-radio>
          <el-radio label=3>下装</el-radio>
          <el-radio label=4>鞋子</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="性別" prop="gender">
        <el-radio-group v-model="dataForm.gender">
          <el-radio label=1>男</el-radio>
          <el-radio label=2>女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :class="{ hide: hideUpload }" label="服饰图片" prop="imgFileList">
        <el-upload
            ref="upload"
            action="#"
            multiple
            :limit="limit"
            :file-list="dataForm.imgFileList"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-change="OnChange"
            :on-remove="handleRemove"
            :on-exceed="handleExceed"
            accept="image/jpeg,image/png"
            :auto-upload="false">
          <svg t="1708595840001" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="4203" width="50" height="50"><path d="M914.618182 477.090909H546.909091V109.381818c0-18.618182-16.290909-34.909091-34.909091-34.909091s-34.909091 16.290909-34.909091 34.909091v367.709091H109.381818c-18.618182 0-34.909091 16.290909-34.909091 34.909091s16.290909 34.909091 34.909091 34.909091h367.709091v367.709091c0 18.618182 16.290909 34.909091 34.909091 34.909091s34.909091-16.290909 34.909091-34.909091V546.909091h367.709091c18.618182 0 34.909091-16.290909 34.909091-34.909091s-16.290909-34.909091-34.909091-34.909091z" fill="#8a8a8a" p-id="4204"></path></svg>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitUpload()">确定</el-button>
        <el-button @click="resetForm('dataForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 服裝顯示 -->
  <div>
    <el-dialog
        v-model="dialogVisible"
        center
        width="30%"
    >
      <el-main>
        <div class="block">
          <el-image v-if="dialogImageUrl" :src="dialogImageUrl"></el-image>
        </div>
      </el-main>
    </el-dialog>
  </div>

</template>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<script>
import axios from "axios";
import {ElMessage} from "element-plus";
export default {
  data() {
    return {
      dataForm: {
        imgFileList: [],
        clothingName:"",
        type:0,
        gender:0
      },
      //图片上传的参数
      visible: false,
      uploadUrl: "",
      dialogImageUrl: "",
      dialogVisible: false,
      limit: 1,
      hideUpload: false, //是否显示上传图片的加号
      deleteImgFileList: [], //存已被删除了的图片的id
      rules: {
        clothingName: [
          { required: true, message: '请输入服饰名称', trigger: 'blur' }
        ],
        type: [
          { type: '请選擇服饰类型', required: true}
        ],
        gender: [
          { gender: 'array', required: true}
        ],
        imgFileList: [
          { required: true, message: '请上传图片',validator: this.validateImgFileList }
        ],
      }
    };
  },
  mounted() {},
  methods: {
    returnClothingList(){
      this.$router.push({path:'/clothesManagement/ClothesList'})
    },
    //定義新增數據
    addClothingInfo(clothingName,type,gender){
      return {
        "clothingName":clothingName,"type":type, "gender": gender,
      };
    },
    validateImgFileList(rule, value, callback) {
      if (this.dataForm.imgFileList.length === 0) {
        callback(new Error('请上传图片'));
      } else {
        callback();
      }
    },
    //点击上传图片
    submitUpload() {
      let formData = new FormData();
      let addData = this.addClothingInfo(this.dataForm.clothingName, this.dataForm.type, this.dataForm.gender);

      this.dataForm.imgFileList.forEach((file) => {
        formData.append("file", file.raw);
      });

      formData.append("addData", JSON.stringify(addData)); // 将 addData 添加到 formData 中

      axios.post('/clothingManage/addClothing', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
          .then(response => {
            // 处理后端返回的数据
            if (response.status === 200) {
              ElMessage({
                message: '添加成功',
                type: 'success',
              });
              this.resetForm('dataForm');
              this.dataForm.imgFileList = [];
            }
          })
          .catch(error => {
            // 处理错误情况
            console.log(error);
            this.$message.error();
          });
    },
    //预览图片时
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      console.log("预览图片时")
    },
    OnChange(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      this.dataForm.imgFileList.push(file);

    },
    //删除图片时
    handleRemove(file) {
      if (file.id) {
        console.log("删除了已被上传过的图片");
        console.log(file.id);
        this.deleteImgFileList.push(file.id);
      }
     // this.dataForm.imgFileList = fileList;
     // this.hideUpload = fileList.length >= this.limit;
    },
    //文件超出个数限制时
    handleExceed() {
      this.$message.warning(
          `当前限制选择 1 个文件`
      );
    },
    handleCommodityPicSuccess(res) {
      if (res && res.code === 200) {
        this.$message.success('上传成功');
      } else if (res && res.message) {
        this.$message.error(res.message);
      } else {
        this.$message.error('上传失败，未知错误');
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
};
</script>

<style scoped>
.row__title{
  color: #53646f;
  font-weight: 400;
  font-size: 20px;
  margin: 0;
}

</style>

